<template>
    <div>
        <el-tabs v-model="activeName" style="height: 200px;">
            <el-tab-pane label="分类管理" name="first">分类管理
                <el-tree
                    :data="categoriesTree"
                    :default-expand-all="false"
                    :show-checkbox="true"
                    :draggable="true"
                >
                    <!-- slot-scope：根据 el-tree 的 data 类循环生成 span -->
                    <!-- 在循环过程中传入两个变量 -->
                    <span class="custom-tree-node" slot-scope="{node, data}">
                        <span>{{data.name}}</span>
                        <span>
                        <el-button
                            v-if="data.pid == 0"
                            type="text"
                            size="mini"
                            @click.stop="addCategory(data.id)">
                            添加新分类
                        </el-button>    
                        <el-button
                            type="text"
                            size="mini"
                            @click.stop="remove(node, data)">
                            删除新分类
                        </el-button>
                        </span>
                    </span>
                </el-tree>
                <el-button @click="add(0)" type="primary" class="mt10">添加顶层分类</el-button>
            </el-tab-pane>
            
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import axios from 'axios';

@Component
export default class Category extends Vue {
    activeName: string = 'first';
    categories: Array<any> = [];
    categoriesTree: Array<any> = [];

    created() {
        axios({
            method: 'get',
            url: '/api/admin/category'
        }).then(res => {
            let {data} = res;
            this.categories = data;
            this.categoriesTree = this._tree(0);
            console.log(this.categoriesTree);
        }).catch(e => {
            console.log(e);
        });
    }

    _tree(id: number) {
        let data = this.categories.filter((item: any) => item.pid === id);

        data.forEach((item: any) => {
            item.children = this._tree(item.id);
        });

        return data;
    }

    async add(pid: number) {
        // await axios({
        //     method: 'post',
        //     url: '/api/admin/category/add',
        //     data: {
        //         pid: 0,
        //         name: '测试数据'
        //     }
        // })

        let val:any = await this.$prompt('请输入分类名称', '添加', {
            inputPattern: /\w+/,
            inputErrorMessage: '请输入正确名称'
        });
        console.log(val);

        let res: any = await axios({
            method: 'post',
            url: '/api/admin/category/add',
            data: {
                pid,
                name: val.value
            }
        })

        if (res.data.code) {
            // 有错
            this.$message.error(res.data.message);
        } else {
            this.categories.push(res.data.data);
            this.categoriesTree = this._tree(0);
            this.$message.success("添加成功");
        }
    }

    remove() {}
}
</script>

<style scoped>
.el-tree-node__content {
    padding: 10px;
}
.custom-tree-node {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
}
</style>